<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
    <button id='btn1'>播放</button>
    <button id='btn2'>暂停</button>
    <button id='btn3'>停止</button>
    <button id='btn4'>进度</button>
  <video src="" controls id="v1">
    你的浏览器不支持video
  </video>
</body>
<script>
    /**
     * src      引用地址
     * autoplay 自动播放
     * loop     循环播放
     * poster   封面地址
     * controls 显示操作界面
     * video    支持的格式
     * IE       WMV/MP4
     * Chrome   webq/mp4
     * FireFox  ogv/mp4
     * 
     * .play()  播放
     * .pause() 暫停
     * .currentTime 当前播放的位置
     * .duration    长度(s)
     * .volume      音量：0-100
     * .muted       静音：bool
     * https://blog.csdn.net/weixin_38675541/article/details/78527878    弹幕
     * 
     * video 视频播放速度怎么设置
     * 1.服务调整，存成多个文件
     * 2.点播调整码率
     * 
     * video 有一个 600*400的容器  让视频区域适配
     * W=600 H=400
     * w,h
     * if(w/h>W/H){
     *  让宽度适应容器宽度
     *  h=H*w/W
     *  w=W
     * }else{
     *  w=W*h/H
     *  h=H
     * }
     *
     * 
     * 
     */
    let oBtn1=document.getElementById('btn1')
    let oBtn2=document.getElementById('btn2')
    let oBtn3=document.getElementById('btn3')
    let oBtn4=document.getElementById('btn4')
    let oV=document.getElementById('v1')
    // let oBtn1=document.getElementById('btn1')
    // 播放
    oBtn1.onclick=function(){
        oV.play();
    }
    oBtn2.onclick=function(){
        oV.pause();
    }
    oBtn3.onclick=function(){
        oV.pause();
        oV.currentTime=0;
    }
    oBtn4.onclick=function(){
        alert(`${oV.currentTime}|${oV.duration}`)
    }
    oV.addEventListener('timeupdate',function(){
        var oDivWidth=parseInt(100*oV.currentTime/oV.duration)+'%'
        console.log(oV.currentTime,oV.duration)
    },false)
    oV.muted=true;
</script>
</html>